<!--**
  *@info 选择上传照片模式组件
  *@author: thinkmix
* *-->
<template>
  <transition appear name="fadeIn">
    <section class="m-select-picker f-flex mid center" v-show="show">
      <div class="box bgWhite">
        <div class="title f-tac">
          <b>选择图片上传方式</b>
        </div>
        <div class="m-select-box f-flex mid">
          <div class="item auto f-flex column mid" @click="onSelect('TAKE')">
            <div class="icon icon-camera"></div>
            <div class="dp">拍照</div>
          </div>
          <div class="item auto f-flex column mid" @click="onSelect('SELECT')">
            <div class="icon icon-photo"></div>
            <div class="dp">相册</div>
          </div>
        </div>
      </div>
      <div class="f-mask" @click="onClose"></div>
    </section>
  </transition>
</template>
<script>

export default {
  name: 'select-photo-picker',
  props: {
    show: {
      default: false,
      type: Boolean
    },
  },
  data () {
    return {

    }
  },
  computed: {
  },
  created () {

  },
  methods: {
    onSelect (model) {
      this.$emit('on-select', model)
    },
    onClose () {
      this.$emit('on-close', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.m-select-picker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  > .box {
    padding: 0.2rem;
    overflow: hidden;
    border-radius: 15px;
    > .title {
      margin-bottom: 0.15rem;
      font-size: 0.15rem;
    }
  }
}
.m-select-box {
  width: 160px;
  > .item {
    padding: 0.1rem 0;
    border-radius: 7px;
    > .icon {
      width: 0.4rem;
      height: 0.4rem;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    > .dp {
      text-align: center;
      margin-top: 5px;
    }
    > .icon-camera {
      background-image: url(~@/assets/img/tag/select_take.png);
    }
    > .icon-photo {
      background-image: url(~@/assets/img/tag/select_photo.png);
    }
    &:active {
      background-color: #f8f8f8;
    }
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    transform: none;
  }
}
.fadeIn-enter-active {
  animation-name: fadeIn;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  backface-visibility: visible;
}
</style>
